<template>
	<div class="bg">
		<el-card shadow="always" class="box-card form-box">
			<div slot="header">
				<span>注册</span>
			</div>
			<el-form ref="form" :model="form" label-width="70px" :rules="rules">
				<el-form-item label="账户" prop="username">
					<el-input v-model="form.username" prefix-icon="el-icon-user"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="form.password" prefix-icon="el-icon-key" type="password"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="check_password">
					<el-input v-model="form.check_password" prefix-icon="el-icon-key" type="password"></el-input>
				</el-form-item>
				<el-form-item label="姓名" prop="fullname">
					<el-input v-model="form.fullname" prefix-icon="el-icon-aim"></el-input>
				</el-form-item>
				<el-form-item label="手机" prop="tel">
					<el-input v-model="form.tel" prefix-icon="el-icon-mobile-phone"></el-input>
				</el-form-item>
				<el-form-item prop="isAgree">
					<el-checkbox v-model="form.isAgree" label="同意本站用户协议"></el-checkbox>
				</el-form-item>
				<el-form-item>
					<el-button size="medium" type="primary" @click="handleRegister">注 册</el-button>
				</el-form-item>
			</el-form>
			<div class="link-box">
				<router-link to="/">登录账户</router-link>
				<router-link to="/">忘记密码？</router-link>
			</div>
		</el-card>
	</div>
</template>

<script>
// 按需导入
import { Admin } from '@/api';
export default {
	data() {
		// 验证确认密码
		var validate_password = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.form.password) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
			form: {
				// 与API文档一致！
				username: '',
				password: '',
				fullname: '',
				tel: '',
				check_password: '',
				// 同意用户协议，文档中没有也可以写在这
				isAgree: false,
			},
			rules: {
				username: [
					{ required: true, message: '请输入账号名称！', trigger: 'blur' },
					{ min: 3, max: 36, message: '长度在 3 到 36 个字符', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '请输入密码！', trigger: 'blur' },
					{ pattern: /^\d{3,}/, message: '密码至少3个数字', trigger: 'blur' }
				],
				check_password: [
					{ validator: validate_password, trigger: 'blur' }
				],
				fullname: [
					{ required: true, message: '请输入姓名！', trigger: 'blur' },
					{ min: 2, max: 40, message: '长度在 2 到 40 个字符', trigger: 'blur' }
				],
				tel: [
					{ required: true, message: '请输入手机号！', trigger: 'blur' },
					{
						pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
						message: '手机号码不合法！',
						trigger: 'blur'
					}
				],
				isAgree: [
					{ required: true, message: '请同意本站用户协议！', trigger: 'blur' },
				]
			}
		}
	},
	// 钩子函数
	created() {
		// 不在vue的范围，只能采用操作DOM的方法
		// document.title = "注册--CMS管理系统";
	},
	methods: {
		handleRegister() {
			// 表单验证
			this.$refs.form.validate(async (valid) => {
				let { status, msg } = await Admin.username({ ...this.form });
				if (valid && status) {
					let { status, msg } = await Admin.register({ ...this.form });
					if (status) {
						// 信息提示(elementUI组件)
						this.$message.success(msg);
						// 跳转页面（本质：切换组件）
						this.$router.push('/');
					} else {
						// 登录失败信息提示
						this.$message.error(msg);
					}
				} else {
					this.$message.error(msg);
				}
			})
		}
	}
}
</script>

<style lang="less" scoped>
.bg {
	width: 100vw;
	height: 100vh;
	background: url('img/register-bg.jpg');
	background-size: cover;
	position: relative;

	.form-box {
		position: absolute;
		right: 40px;
		top: 50%;
		transform: translateY(-50%);
		background-color: white;
		border-radius: 4px;
		font-size: 14px;
		width: 360px;

		.link-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
}
</style>
